<template>
    <div :style="{ backgroundColor: '#fff', minHeight: 'calc(100vh - 89px)' }">
        <div class="container-xl">
            <div class="row row1">
                <div class="col col1">创建任务</div>
            </div>
            <createdteamjobVue :teamid="p.ID" :teamusers="teamusers" :options="options" :data="data"
                :question="question" :roure="{ name: '团队工作' }" :team="team" :is-admin="true">
            </createdteamjobVue>
        </div>
    </div>

</template>



<script setup lang="ts">
import { CascaderOption } from 'element-plus';
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { asyncgetteam, asyncselectteamselectuser, asyncteamselectteamjob } from '../../../api';
import createdteamjobVue from '../../../components/teamjob/createdteamjob.vue';
import Studycodemodel from '../../../mysql_interface/studycodemodel';

const p = defineProps<{ ID: number }>()
const route = useRoute()

const team = ref<Studycodemodel.Iteam>()


const teamusers = ref<Studycodemodel.Iteamuser[]>([])
const ID = computed(() => {
    return Number(route.query.ID)
})
const data = ref<Studycodemodel.Iteamjob>()

const question = ref<Studycodemodel.Iquestion[]>([])

watch(() => ID.value, (v) => {
    if (v) {
        start()
    }
})

onMounted(() => {
    start()
})

const options = computed<CascaderOption[]>(() => {
    const t = team.value;
    let n: CascaderOption[] = [];
    if (t) {
        const g = t.teamusergroup || [];

        n = g.map((e) => {
            let teamuser: Studycodemodel.Iteamuser[] = [];
            if (teamusers.value) {
                teamuser = teamusers.value.filter((v) => v.teamusergroupid === e.ID);
            }
            return {
                children: teamuser.map(e => {
                    return {
                        label: e.user?.name,
                        value: e.user?.ID
                    }
                }),
                value: '',
                label: e.name,
            };
        });
    }
    const o: CascaderOption = {
        label: "未分组",
        value: '',
        children:
            teamusers.value?.filter(
                (e) => e.jurisdiction === "0" && !e.teamusergroupid
            ).map(e => {
                return {
                    label: e.user?.name,
                    value: e.user?.ID
                }
            }) || [],
    };
    return [o].concat(n);
});

async function start() {
    teamusers.value = await asyncselectteamselectuser({ teamid: p.ID })
    team.value = await asyncgetteam({ ID: p.ID })
    if (ID.value) {
        const n = await asyncteamselectteamjob({ teamid: p.ID, ID: ID.value })
        if (n.rows.length) {
            data.value = n.rows[0]
            question.value = n.question
        }
    }
}

</script>


<style scoped>
.container-xl {
    background-color: #FAFAFA;
    margin-top: 24px;
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
}

.row1 {
    padding-top: 24px;
    padding-bottom: 24px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var(--color-43);
}

.col1 {
    padding-left: 20px;
}
</style>
